<template>
  <a-config-provider :locale="locale">
    <!-- 全屏加载容器 -->
    <div v-if="isLoading" class="global-loading">
      <a-spin :size="20" dot />
    </div>
    <router-view v-else />
  </a-config-provider>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { useUserStore } from './store';
  import { Message } from '@arco-design/web-vue';

  const userStore = useUserStore();
  const isLoading = ref(true);

  onMounted(async () => {
    try {
      await userStore.fetchAllData();
      await userStore.getUserInfo();
    } catch (error) {
      Message.error('数据加载失败:', error);
    } finally {
      isLoading.value = false;
    }
  });
</script>
<style lang="less" scoped>
  .global-loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.8);
    z-index: 9999;
  }

  /* 添加过渡效果 */
  router-view {
    opacity: 1;
    transition: opacity 0.3s ease;
  }

  .global-loading + router-view {
    opacity: 0.5;
    pointer-events: none;
  }
</style>
